<template>
  <div class="hot" v-if="homehot.length">
    <div
      style="background-image: linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 126, 83, 1.0), rgba(255, 0, 0, 0));">
      <van-icon style="position: relative;top: -0.1rem;z-index: 1;left: 38.5vw;" name="hot-o" size="3rem"
        color="#fc3268" />
    </div>
    <div style="top: -1.625rem;position: relative;">
      <van-row style="" gutter="7" type="flex" justify="space-around">
        <van-col @click="gotoinfo(item.id)" v-for="(item,index) in homehot" :key="index" span="6">
          <van-image fit="cover" :src="item.img" />
          <div style="width: 100%;height: 40%;text-align: center;color: #c3a394;" v-text="item.name"></div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import router from '@/router'
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'goOds',
    methods: {
      gotoinfo(id) {
        router.push({
          path: '/Details/' + id
        })
      },
      ...mapMutations(['SET_HOME_HOT']),
      Hot_goods() {
        this.$api.homeData.goods_gethomeinfo(3, 1).then(res => {
          this.SET_HOME_HOT(res.data)
        })
      }
    },
    computed: {
      ...mapState(['homehot'])
    },
    created() {
      this.Hot_goods()
    }
  }
</script>

<style>
  .hot {
    margin: auto;
    width: 90vw;
    /* background: #000; */
    border-radius: 10px;
  }
</style>
